<template>

	<div class="longhouseMaster list4 list4list ">
		<div class="Master">
			<div class="Master-bg">
				<div class="Master-bgimg-box">
					<img class="Master-bgimg" src="../assets/img/images/apart_bg.jpg" />
				</div>
				<div class="nick-img-box">
					<img class="nick-img" v-if="HouseMasterInfodata.imgUrl.indexOf('?imageslim')==-1" :src="HouseMasterInfodata.imgUrl+'?imageslim'" />
					<img class="nick-img" v-else :src="HouseMasterInfodata.imgUrl" />
				</div>
			</div>
			<div class="Master-info-box">
				<div class="nick-name-box">
					<p class="nick-name">{{HouseMasterInfodata.nick}}</p>
					<p class="nick-rz"><img class="circles" src="../assets/img/images/circles_03.png" />工商认证</p>
				</div>
				<div class="Master-info" v-show="desc">
					<div class="Master-info-text" ref="mastertext">{{HouseMasterInfodata.desc}}</div>
				</div>
				<div class="Master-info-btn" v-show="desc">
					<span @click="masterinfo_open"></span>
				</div>
			</div>
		</div>
		<div class="Master-list house">
			<yd-list theme="4" slot="list">
				<yd-list-item v-for="item, key in getlongHouseListdata" :key="key" @click.native="detailsrouter(item.id)">
					<img class="my-yd-list-img" slot="img" v-if="item.house_img.indexOf('?')==-1" :src="item.house_img+'?imageslim'">
					<img class="my-yd-list-img" slot="img" v-else :src="item.house_img">
					<span slot="title">{{item.title}}</span>
					<yd-list-other class="my-yd-list-other" slot="other">
						<div class="add-box">
							<div>
								<div class="h-introduce swiper-item">
									<span class="demo-list-price">{{item.room}}室{{item.hall}}厅{{item.toilet}}卫</span>
									<span>{{item.acreage}}m²</span>
								</div>
								<div v-if="item.station.length!=0" class="h-address">
									<!--<img class="map-icon" src="" />-->
									<yd-icon name="location" style="font-size: 0.24rem !important;"></yd-icon>
									<span>{{item.station}}</span>
								</div>
							</div>
							<div class="h-price">￥<span>{{item.price}}</span>/月</div>
						</div>
						<div class="house-icon">
							<span v-if="item.house_type==1">整租</span>
							<span v-if="item.house_type==2">合租</span>
							<span v-for="tagsitem,key in item.tags.split(',').slice(0,2) " :key="key" v-if="tagsitem!=''">{{tagsitem}}</span>
						</div>

					</yd-list-other>

				</yd-list-item>
			</yd-list>
		</div>

		<div class="ALL-house" @click="Allhouse($event)">全部房源</div>
	</div>
</template>

<script>
	import api from '../fetch/api'
	import { mapGetters, mapActions } from 'vuex'
	export default {
		name: "longhouseMaster",
		data() {
			var that = this;
			return {
				ismastertext: false,
				cityId: that.$route.query.cityId, // string 是
				houseMasterId: that.$route.query.houseMasterId, // string 否 公寓搜索
				source: "web", // string 是,
				page: 0,
				getlongHouseListdata: [],
				desc: true,
				pageSize: []
			}
		},
		mounted() {
			var that = this;
			that.getlongHouseList();
			that.HouseMasterInfo();
		},
		computed: {
			...mapGetters([
				'HouseMasterInfodata'
			])
		},
		methods: {
			...mapActions({
				setMasterInfo: 'setMasterInfo',
			}),
			masterinfo_open() {
				var that = this;
				if(!that.ismastertext) {
					that.$refs.mastertext.style.height = "auto";
					that.ismastertext = true;
				} else {
					that.$refs.mastertext.style.height = "1.5rem";
					that.ismastertext = false;
				}
			},
			HouseMasterInfo() {
				var that = this;
				var ajaxSign = {
					"houseMasterId": that.houseMasterId.toString(), // string 否 公寓搜索
					"source": that.source, // string 是
				};
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetMasterInfo(ajaxData)
					.then(res => {
						let ajaxdata = res.result;
						that.setMasterInfo(ajaxdata)
						document.title = that.HouseMasterInfodata.nick;
						if(that.HouseMasterInfodata.desc.length == 0) {
							that.desc = false;
						}
					})

			},
			getlongHouseList() {
				var that = this;
				var ajaxSign = {
					"cityId": that.cityId, // string 是
					"houseMasterId": that.houseMasterId.toString(), // string 否 公寓搜索
					"source": that.source, // string 是
					"page": that.page.toString()
				};
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetLongList(ajaxData)
					.then(res => {
						let ajaxdata = res.result;
						that.getlongHouseListdata = that.getlongHouseListdata.concat(ajaxdata);

					})
			},
			Allhouse(event) {
				var that = this;
				event.cancelBubble = true;
				that.$router.push({
					path: '/longList',
					query: {
						houseMasterId: that.houseMasterId.toString(),
						cityId: that.cityId
					}
				})
			}, //			详情路由跳转
			detailsrouter(houseId) {
				var that = this;
				that.$router.push({
					path: '/longDetails',
					query: {
						houseId: houseId
					}
				})
			},
		}
	}
</script>

<style>
	@import url("../assets/css/listfour.css");
	.longhouseMaster {
		width: 100%;
	}
	
	.longhouseMaster .Master {
		width: 100%;
	}
	
	.longhouseMaster .Master-bg {
		width: 100%;
		height: 3.14rem;
		position: relative;
		text-align: center;
	}
	
	.longhouseMaster .Master-bgimg-box {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	.longhouseMaster .Master-bgimg {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.longhouseMaster .nick-img-box {
		z-index: 1;
		width: 1.34rem;
		height: 1.34rem;
		overflow: hidden;
		margin: auto;
		position: absolute;
		bottom: -.75rem;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.longhouseMaster .nick-img {
		display: block;
		max-width: 100%;
		min-height: 100%;
		border-radius: 50%;
	}
	
	.longhouseMaster .Master-info-box {
		padding: .75rem .24rem .24rem .24rem;
		box-sizing: border-box;
		background: #fff;
	}
	
	.longhouseMaster .nick-name-box {
		text-align: center;
		font-size: .34rem;
	}
	
	.longhouseMaster .nick-name-box>p {
		margin-top: .1rem;
		display: flex;
		justify-content: center;
	}
	
	.longhouseMaster .circles {
		display: block;
		width: .28rem;
		height: .31rem;
	}
	
	.longhouseMaster .nick-rz {
		font-size: .28rem;
		color: #868686;
	}
	
	.longhouseMaster .Master-info {
		margin-top: .25rem;
	}
	
	.longhouseMaster .Master-info-text {
		text-indent: .5rem;
		font-size: .25rem;
		line-height: .4rem;
		height: 1.5rem;
		overflow: hidden;
	}
	
	.longhouseMaster .Master-info-btn {
		width: 100%;
		margin-top: .1rem;
	}
	
	.longhouseMaster .Master-info-btn>span {
		display: block;
		width: .35rem;
		height: .35rem;
		margin: auto;
		border-bottom: 1px solid #7D7D7D;
		border-right: 1px solid #7D7D7D;
		transform: rotate(45deg);
	}
	/*房源列表*/
	
	.longhouseMaster .Master-list {
		margin-top: .05rem;
		padding-bottom: 1rem;
		box-sizing: border-box;
	}
	/*房屋列表*/
	
	.list4list .houselist {
		width: 100%;
		padding-top: .1rem;
		box-sizing: border-box;
	}
	
	.list4list .housenav {
		width: 100%;
		display: -webkit-flex;
		display: flex;
		padding: .21rem 0;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 1px;
	}
	
	.list4list .housenavitem {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		font-size: .28rem;
	}
	
	.list4list .housenavitem img {
		height: .12rem;
		margin-left: .1rem;
	}
	
	.list4list .yd-list-loading>div {
		display: block !important;
	}
	/*查看全部房源*/
	
	.longhouseMaster .ALL-house {
		width: 100%;
		color: #fff;
		background: #e34648;
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;
		padding: .24rem;
		box-sizing: border-box;
		font-size: .34rem;
	}
</style>